<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <title>the detail form</title>
    <!-- <link rel="stylesheet" href="/css/styles.css" /> -->
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/object.js"></script>
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>

    <link rel="stylesheet" href="../css/overcast/jquery-ui-1.8.20.custom.css" />
    <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/css/SyntaxHighlighter.css">
    <script language="javascript" src="../SyntaxHighlighter/js/shCore.js"></script>
    <script language="javascript" src="../SyntaxHighlighter/js/shBrushJScript.js"></script>
    <script language="javascript" src="../SyntaxHighlighter/js/shBrushXml.js"></script>
    <script type="text/javascript" src="../js/jQueryRotate.js"></script>
    <link rel="stylesheet" href="../css/jquery.ibutton.css" />
    <script type="text/javascript" src="../js/jquery.ibutton.min.js"></script>
    <style type="text/css">
        #demo-source > div
        {
            margin-top: 15px;
        }
        
        #demo-source > div > div
        {
            margin-top: 10px;
        }
        
        #demo-source a
        {
            font-size: 15px;
            text-decoration: underline;
            cursor: pointer;
        }
        
        #demo-source a > img
        {
            margin-right: 3px;
        }
        a
        {
            color: #54A6DE;
        }
        body
        {
            color: #888;
        }
        .buttons
        {
            margin-top: 20px;
        }
        
        .buttons input
        {
            font-size: 12px;
            margin-right: 10px;
        }
        
        #ui-datepicker-div
        {
            font-size: 12px;
        }
        
        input[type='text']
        {
            width: 350px;
            padding: 2px;
            font-size: 15px;
            text-shadow: 0px 1px 0px #fff;
            outline: none; /* IE10 */
            background-image: -ms-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%); /* Mozilla Firefox */
            background-image: -moz-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%); /* Opera */
            background-image: -o-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%); /* Webkit (Safari/Chrome 10) */
            background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #BCBCBE), color-stop(1, #FFFFFF)); /* Webkit (Chrome 11+) */
            background-image: -webkit-linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%); /* Proposed W3C Markup */
            background-image: linear-gradient(top left, #BCBCBE 0%, #FFFFFF 100%);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 1px 1px 0px #efefef;
            -moz-box-shadow: 1px 1px 0px #efefef;
            box-shadow: 1px 1px 0px #efefef;
        }
        
        input:focus
        {
            -webkit-box-shadow: 0px 0px 5px #007eff;
            -moz-box-shadow: 0px 0px 5px #007eff;
            box-shadow: 0px 0px 5px #007eff;
        }
        
        #divDetail table
        {
            border: 3px solid #CCC;
            border-radius: 5px;
        }
        
        #divDetail td
        {
            padding: 7px;
        }
    </style>
</head>
<body>
    <div id="divDetail">
        <input type="hidden" value="" name="Id" />
        <table>
            <tr>
                <td>
                    Image Url:
                </td>
                <td>
                    <input type="text" name="BoxArt.SmallUrl" />
                </td>
            </tr>
            <tr>
                <td>
                    Name:
                </td>
                <td>
                    <input type="text" name="Name" />
                </td>
            </tr>
            <tr>
                <td>
                    Rating:
                </td>
                <td>
                    <input type="text" name="AverageRating" />
                </td>
            </tr>
            <tr>
                <td>
                    Dvd:
                </td>
                <td>
                    <input type="checkbox" name="Dvd.Available" />
                </td>
            </tr>
            <tr>
                <td>
                    Modified:
                </td>
                <td>
                    <input type="text" id="birthday" name="DateModified" />
                </td>
            </tr>
        </table>
    </div>
    <div class="buttons">
        <input type="button" value="submit" onclick="submitchange()" />
        <input type="button" value="cancel" onclick="parent.$.colorbox.close();" />
    </div>
    <div id="demo-source">
        <div>
            <a>
                <img alt="closed" style="height: 12px;" src="../img/closed.png" />java script</a>
            <div class="codeblock">
                <pre name="javascriptcode" class="js:nocontrols">
			//initial data
			$(function() {
				var id = $d.url.para('id');
				//for editing
				if(id != '') {
					//query the data
					$.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$callback=callback&$filter=Id eq '" + id + "'", {}, function(data) {
							var d = data.d.results[0];
							//format the datetime
							d.DateModified = $d.datetime.format(d.DateModified, "MM-dd-yyyy");
							//set data to the page
							$("#divDetail").setObject(d);
						}, {
                    ajax: {	
                        dataType : "jsonp",
                        jsonpCallback: "callback"
                    }
					});
				} 
			});
			
			//submit the change
			function submitchange() {
				var model = $("#divDetail").pushObject();
				//change the datetime value to the normal format
				model.DateModified = $d.datetime.format(model.DateModified, null, "MM-dd-yyyy");
				var id = $d.url.para('id');
				//inert
				if(id == '')
					parent.insert(model);
				//update
				else
					parent.update(model);
				//close the popup window
				parent.$.colorbox.close();
			}
			</pre>
            </div>
        </div>
        <div>
            <a>
                <img style="height: 12px;" src="../img/closed.png" />HTML</a>
            <div class="codeblock">
                <pre name="htmlcode" class="html:nocontrols">
		&lt;div id=&quot;divDetail&quot;&gt;
			&lt;input type=&quot;hidden&quot; value=&quot;&quot; name=&quot;Id&quot;/&gt;
			&lt;table&gt;
				&lt;tr&gt;
					&lt;td&gt; Image Url: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;__metadata.media_src&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

				&lt;tr&gt;
					&lt;td&gt; Name: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;Name&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

				&lt;tr&gt;
					&lt;td&gt; Rating: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; name=&quot;AverageRating&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt; Dvd: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;checkbox&quot; name=&quot;Dvd.Available&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td&gt; Modified: &lt;/td&gt;
					&lt;td&gt;
					&lt;input type=&quot;text&quot; id=&quot;birthday&quot; name=&quot;DateModified&quot; /&gt;
					&lt;/td&gt;
				&lt;/tr&gt;

			&lt;/table&gt;
		&lt;/div&gt;
			</pre>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            dp.SyntaxHighlighter.HighlightAll('javascriptcode');
            dp.SyntaxHighlighter.HighlightAll('htmlcode');

            $("#demo-source a").click(function () {
                $(this).next().toggle('slow');
                var img = $(this).find('img');
                var open = false;
                if (img.attr("alt") != "open") {
                    open = true;
                    img.attr("alt", "open")
                } else {
                    open = false;
                    img.attr("alt", "closed")
                }

                $(this).find('img').rotate({
                    angle: open ? 0 : 90,
                    animateTo: open ? 90 : 0
                });
            }).next().hide();

            $("input[type='button']").button();

            $("#birthday").datepicker({
                dateFormat: "mm-dd-yy"
            });

            var id = $d.url.para('id');

            if (id != '') {
                $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$callback=callback&$filter=Id eq '" + id + "'", {}, function (data) {
                    var d = data.d.results[0];
                    if (d) {
                        d.DateModified = $d.datetime.format(d.DateModified, "MM-dd-yyyy");
                        $("#divDetail").setObject(d);
                    }
                    $("input[type='checkbox']").iButton({
                        labelOn: "Yes",
                        labelOff: "No"
                    });
                }, {
                    ajax: {
                        dataType: "jsonp",
                        jsonpCallback: "callback"
                    }
                });
            } else {
                $("input[type='checkbox']").iButton({
                    labelOn: "Yes",
                    labelOff: "No"
                });
            }
        });

        function submitchange() {
            var model = $("#divDetail").pushObject();

            model.DateModified = $d.datetime.format(model.DateModified, null, "MM-dd-yyyy");

            var id = $d.url.para('id');

            if (id == '') {
            model.Id = $d.guid.generate();
                parent.insert(model);
                }
            else
                parent.update(model);

            parent.$.colorbox.close();
        }
    </script>
</body>
</html>
